<template>
  <div class="inspection-work">
    <el-card>
      <div class="top-search" v-has-permi="['inspection:infrastructure:query']">
        <el-form :model="searchConfig" label-width="auto" :inline="true">
          <el-form-item label="巡检人">
            <el-select v-model="queryParams.userId" placeholder="请选择" style="width: 100%;" @change="getList">
              <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button plain @click="resertList">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-top">
        <el-button type="primary" @click="inspAdd" v-has-permi="['inspection:infrastructure:add']">增加</el-button>
        <el-button type="success" @click="inspEdit" v-has-permi="['inspection:infrastructure:edit']">编辑</el-button>
        <el-button type="danger" @click="inspDel" v-has-permi="['inspection:infrastructure:delete']">删除</el-button>
      </div>
      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="userName" label="巡检人名称" />
          <el-table-column width="200" property="inspectTime" label="巡检日期"> </el-table-column>
          <el-table-column property="status" label="完成情况"
            ><template #default="scope">
              <el-tag :type="scope.row.status==1?'success':'danger'">{{scope.row.status==1?'已完成':'未完成'}}</el-tag></template
            ></el-table-column
          >
          <el-table-column property="name" label="操作">
            <template #default="scope">
              <div>
                <el-button plain type="primary" size="small"  v-if="scope.row.status=='1'"     @click="exportExcel(scope.row)" v-has-permi="['inspection:infrastructure:export']">导出</el-button>
                <el-button plain type="info" size="small" @click="toDetail(scope.row)" v-has-permi="['inspection:infrastructure:detail']">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>
    <!-- 巡检弹框 -->
    <el-dialog v-model="inspVisible" :title="inspTile" width="800" :close-on-click-modal="false">
      <el-form ref="inspFormRef" style="max-width: 800px" :model="inspForm" label-width="auto" class="demo-ruleForm" status-icon>
        <el-form-item label="巡检人:" prop="userId" :rules="[{ required: true, message: '请选择巡检人' }]">
          <el-select v-model="inspForm.userId" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" @click="seleceChange(item)" />
          </el-select>
        </el-form-item>
        <el-form-item label="巡检日期:" prop="inspectTime" :rules="[{ required: true, message: '请选择巡检日期' }]">
          <el-date-picker v-model="inspForm.inspectTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" :editable="false" style="width: 100%;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="inspVisible = false">关闭</el-button>
          <el-button type="primary" @click="inspEnter"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情抽屉 -->
    <el-drawer v-model="detailDrawerFlag" :title="detailDrawerTitle" direction="rtl" size="80%" :close-on-click-modal="false"> <detail-drawer ref="drawerRef" :rowID="rowID" :getList="getList" /> </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { ElTable } from 'element-plus';
import {listUser} from '@/api/system/user'
import {infrastructureList,infrastructureAdd,infrastructureEdit,infrastructureDel} from '@/api/inspection'
import DetailDrawer from './DetailDrawer.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const searchConfig = ref({
  inspectionPerson: ''
});
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userId:''
  },
  tableData:[],
  inspVisible:false,
  inspTile:"",
  inspForm:{},
  detailDrawerFlag:false,//详情
  detailDrawerTitle:"",
  rowID:""
});
const { queryParams ,tableData ,inspVisible,inspTile,inspForm,detailDrawerFlag,detailDrawerTitle,rowID} = toRefs(data);
const inspFormRef =ref()
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};

/* 新增 */
const inspAdd = async()=>{
  inspVisible.value = true
  inspTile.value = '新增'
  inspForm.value = {}
}
/* 弹框确认 */
const inspEnter = async()=>{
  console.log(inspForm.value);
  inspFormRef.value?.validate(async (valid: boolean) => {
    if(valid){
      const res=   inspTile.value == '新增'?  await infrastructureAdd({...inspForm.value}) :await infrastructureEdit({...inspForm.value})
  if(res.code==200){
    inspVisible.value = false
    ElMessage.success(inspTile.value+'成功')
    await getList()
  }
    }
})
}
/* 编辑 */
const inspEdit = async()=>{
  inspTile.value = '编辑'
  console.log(multipleSelection.value);
  if(multipleSelection.value&&multipleSelection.value.length!==1){
    ElMessage.error('请选择一条数据')
    return false
  }

  inspForm.value ={
    id :multipleSelection.value[0].id,
    inspectTime :multipleSelection.value[0].inspectTime,
    userId : multipleSelection.value[0].userId,
    userName:multipleSelection.value[0].userName,
  }
  inspVisible.value = true


}

/* 删除 */
const inspDel =async()=>{
  if(multipleSelection.value&&multipleSelection.value.length===0){
    ElMessage.error('请至少选择一条数据')
    return false
  }

  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const arr = multipleSelection.value.map((item:any)=>item.id)
      console.log(arr);
      const res = await infrastructureDel(arr)
      console.log(res);
      if(res.code===200){
        ElMessage.success('删除成功')
      await  getList()
      }


    })
    .catch(() => {

    })

}
/* 巡检人选中 */
const seleceChange = (e)=>{
  console.log(e);
  inspForm.value.userId = e.userId
  inspForm.value.userName = e.nickName
}

/* 详情 */
const toDetail = (row)=>{
  console.log(row);
  detailDrawerFlag.value = true
  detailDrawerTitle.value = '详情'
  rowID.value = row.id
}



/* 导出 */
const exportExcel = async(row)=>{ 

proxy?.download(
  '/inspect/base/export',
  {
    id:row.id
  }, 
  `基础巡检表.zip`
);


}  



const getList = async() => {
  console.log('getList',queryParams.value);
  const res=  await infrastructureList({...queryParams.value})

  console.log(res);
  tableData.value = res.rows

  total.value = res.total

};

/* chonzghi1 */
const resertList = async()=>{

  queryParams.value =  {
    pageNum: 1,
    pageSize: 10,
    userId:'',
  }
  await getList()



}


const userList = ref<any>([])
const getUserList = async()=>{
  const res  = await listUser()
  console.log(res);
  userList.value = res.rows
}
onMounted(()=>{
  getUserList()
  getList()
})
</script>

<style scoped lang="scss">
.inspection-work {
  padding: 8px;
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
    height: 100%;
    .table-top {
      margin-bottom: 20px;
    }
    .table-content {
      width: 100%;
    }
  }
}

.demo-ruleForm{
  :deep(.el-input__wrapper){
    width: 100%;
  }
}
</style>
